import React, { Component } from "react";

import * as service from "../../api/index";
// import { good_list } from "../../api/index";
import { SearchBar,Tabs } from "antd-mobile";

import "../../styles/Index/Allgood.scss";


class Allgood extends Component {
  constructor(props) {
    super(props);
    this.state = {
      goodlist: [],
    };
  }
  componentDidMount() {
    //请求 商品列表
    service.good_list({ id: this.props.location.state.id }).then((res) => {
      this.setState({
        goodlist: res.data.list,
      });
    });
  }
  toDetail(id) {
    this.props.history.push("/detail/" + id);
  }
  render() {
    return (
      <div className="allgood">
        <div className="header">全部商品</div>
        <div className="nav">
          <SearchBar placeholder="搜索店铺内商品" />
        </div>
        <div className='allgoods-tabs'>
                        <Tabs>
                            <Tabs.Tab title='综合' key='add'>

                            </Tabs.Tab>
                            <Tabs.Tab title='销量' key='show'>
                                
                            </Tabs.Tab>
                            <Tabs.Tab title='新品' key='news'>
                                
                            </Tabs.Tab>
                            <Tabs.Tab title='价格' key='price'>
                                
                            </Tabs.Tab>
                            <Tabs.Tab title='筛选' key='xuan'>
                                
                            </Tabs.Tab>
                        </Tabs>
                    </div>
        <div className="list">
          {/* 商品列表 */}
          {this.state.goodlist.map((item, index) => {
            return (
              <div
                className="good"
                key={index}
                onClick={() => {
                  this.toDetail(item.id);
                }}
              >
                <img src={item.pic} alt="" />
                <div className="name">{item.name}</div>
                <div className="old_price">原价 ¥{item.salesPrice.value}</div>
                <div className="price">活动价 ¥{item.salesPrice.value}</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default Allgood;
